React Native 的架構演進

在 React Native 的早期版本中，資料在JavaScript和原生層之間的通訊是透過Bridge來進行。但由於需要頻繁地進行序列化與反序列化操作，導致性能上的瓶頸，特別是在處理大量資料時。現在的React Native使用了下面的架構來改善性能。

圖片連結: Link

JavaScript Interface (JSI)

現在使用JSI來替代Bridge，JSI 是一個用C++的輕量級框架，來處理JavaScript和Native之間的交互。與過去不同，JSI 不再需要通過序列化和反序列化數據來傳遞，現在JavaScript可以直接調用C++方法來提升應用的運行效率。

JSI 的優勢：

1. 性能提升：避免了冗長的資料轉換過程，減少了運行時的開銷。
2. 更靈活的集成：透過 JSI，可以更直接且靈活地與原生模塊進行溝通，提供了更多自定義和擴展的可能性。
3. 跨平台一致性：JSI 為 React Native 提供了一個共享的 C++ 核心，從而在不同平台上保持一致的行為和性能。

渲染系統：Fabric

Fabric 通過將更多的渲染邏輯統一到 C++ 層，減少了 JavaScript 和原生代碼之間的溝通成本。這使得它能夠更快速地將 React 標籤映射到各個平台的原生 UI 元素上。

Fabric 的核心原則

• 同步渲染：Fabric 使用了一種同步的渲染模型，這意味著Virtual DOM與原生 UI 元素的對應是更加即時的。這種方式減少了更新延遲，能更快地反映應用中的狀態變化。解決了舊架構中因異步處理導致的延遲和不一致問題
• 一致性：Fabric 的另一個重點是在 C++ 中實現更多的邏輯，這樣 React Native 在各平台之間的行為差異將會減少。無論是 iOS 還是 Android，Fabric 都會確保渲染結果一致，提供更穩定的開發體驗
• 可擴展性：可以讓我們能通過直接操作 C++ 層來自定義渲染行為，針對不同的平台進行進一步優化。在需要高性能應用下非常有用，像是遊戲或需要複雜動畫的應用

Fabric 的渲染流程

Fabric 的渲染系統與 React 的render、commit和mount階段密切相關。React 的render階段會將JSX結構轉換為 React 的 Virtual DOM，然後 Fabric 會接手，將這些 React 元素映射為原生的 UI 元素。

• Render：React 會首先生成 Virtual DOM 樹。
• Commit：在這個階段，React Native 開始將 Virtual DOM 與平台的具體 UI 進行綁定，並生成一個原生的佈局樹。
• Mount：最後，原生佈局樹會被渲染到設備的螢幕上，完成元件的掛載。

Render, Commit, and Mount · React Native

原生佈局與 View Flattening

Fabric還引入新的View Flattening算法來優化佈局。View Flattening是將多個嵌套視圖合併為一個視圖，從而減少層次結構的複雜性，並減少memory消耗，還可以提高應用的渲染速度。

Flatting前

Flatting後

Threading Model

在新的React Native架構中，React Native運行在多執行緒架構上，分別管理不同的工作負載。傳統架構中，JavaScript在主執行緒中運行，而原生代碼則在背景執行緒中執行，這有時會導致JavaScript Thread阻塞，影響到應用的響應速度。

在新的架構下，React Native允許更多的工作分佈到不同的Thread中進行，減少了 JavaScript Thread負擔，特別是在渲染過程中。通過這樣的設計，UI 更新和業務邏輯可以同時執行，確保應用在操作複雜任務時仍能保持流暢的用戶體驗。

UI Thread: 唯一可以操作host views的執行緒

JS Thread: 執行 React 的渲染階段和佈局的地方

可以參考文檔中關於Thread執行時的情境: React Native

結論

今天簡單的研究了一下，RN的運作和架構。明天開始環境架設

Ref: Architecture Overview · React Native